<template>
  <div class="chess-board">
    <div class="board-container">
      <!-- 棋盘网格 -->
      <div class="grid" :style="gridStyle">
        <div v-for="row in BOARD_CONFIG.ROWS" :key="'row-'+row" class="row">
          <div v-for="col in BOARD_CONFIG.COLS" :key="'col-'+col" 
               class="cell"
               @click="handleCellClick(row-1, col-1)">
          </div>
        </div>
        <!-- 楚河汉界 -->
        <div class="river-text">
          <span class="text-left">楚河</span>
          <span class="text-right">汉界</span>
        </div>
      </div>
      
      <!-- 棋子 -->
      <div class="pieces">
        <div v-for="(piece, index) in pieces" 
             :key="index"
             :class="['piece', piece.camp, { selected: selectedPiece === piece }]"
             :style="getPieceStyle(piece)"
             @click="handlePieceClick(piece)">
          {{ getPieceText(piece) }}
        </div>
      </div>
    </div>

    <!-- 游戏控制按钮 -->
    <div class="game-controls">
      <button @click="resetGame" class="control-btn">重新开始</button>
      <button @click="$emit('quit-game')" class="control-btn">退出游戏</button>
    </div>
  </div>
</template>

<script>
import { BOARD_CONFIG, PIECE_TYPE, CAMP, INITIAL_BOARD } from '../config/gameConfig'
import { getAIMove } from '../services/aiService'

export default {
  name: 'ChessBoard',
  props: {
    playerCamp: {
      type: String,
      required: true
    },
    aiModel: {
      type: String,
      required: true
    },
    difficulty: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      BOARD_CONFIG,
      pieces: [],
      selectedPiece: null,
      currentTurn: CAMP.RED, // 红方先手
      gameState: null
    }
  },
  computed: {
    gridStyle() {
      return {
        width: `${BOARD_CONFIG.COLS * BOARD_CONFIG.CELL_SIZE}px`,
        height: `${BOARD_CONFIG.ROWS * BOARD_CONFIG.CELL_SIZE}px`
      }
    },
    isPlayerTurn() {
      return this.currentTurn === this.playerCamp
    }
  },
  created() {
    this.initializeGame()
  },
  methods: {
    initializeGame() {
      // 初始化棋子
      this.pieces = [
        ...INITIAL_BOARD.red.map(p => ({ ...p, camp: CAMP.RED })),
        ...INITIAL_BOARD.black.map(p => ({ ...p, camp: CAMP.BLACK }))
      ]
      this.selectedPiece = null
      this.currentTurn = CAMP.RED
      this.updateGameState()

      // 如果AI是红方，则让AI先手
      if (this.playerCamp === CAMP.BLACK) {
        this.makeAIMove()
      }
    },
    getPieceStyle(piece) {
      return {
        left: `${piece.position[1] * BOARD_CONFIG.CELL_SIZE - BOARD_CONFIG.CELL_SIZE / 2}px`,
        top: `${piece.position[0] * BOARD_CONFIG.CELL_SIZE - BOARD_CONFIG.CELL_SIZE / 2}px`
      }
    },
    getPieceText(piece) {
      const textMap = {
        [PIECE_TYPE.KING]: piece.camp === CAMP.RED ? '帥' : '將',
        [PIECE_TYPE.ADVISOR]: piece.camp === CAMP.RED ? '仕' : '士',
        [PIECE_TYPE.ELEPHANT]: piece.camp === CAMP.RED ? '相' : '象',
        [PIECE_TYPE.HORSE]: '馬',
        [PIECE_TYPE.CHARIOT]: '車',
        [PIECE_TYPE.CANNON]: '炮',
        [PIECE_TYPE.PAWN]: piece.camp === CAMP.RED ? '兵' : '卒'
      }
      return textMap[piece.type]
    },
    handlePieceClick(piece) {
      if (!this.isPlayerTurn || piece.camp !== this.currentTurn) return
      
      this.selectedPiece = piece
    },
    handleCellClick(row, col) {
      if (!this.isPlayerTurn || !this.selectedPiece) return

      // TODO: 验证移动是否合法
      const isValidMove = this.validateMove(this.selectedPiece, [row, col])
      if (!isValidMove) return

      this.movePiece(this.selectedPiece, [row, col])
      this.selectedPiece = null
      this.switchTurn()
    },
    validateMove(piece, targetPos) {
      // TODO: 实现移动规则验证
      return true
    },
    movePiece(piece, newPosition) {
      piece.position = newPosition
      this.updateGameState()
    },
    switchTurn() {
      this.currentTurn = this.currentTurn === CAMP.RED ? CAMP.BLACK : CAMP.RED
      
      if (!this.isPlayerTurn) {
        this.makeAIMove()
      }
    },
    async makeAIMove() {
      const aiMove = await getAIMove(this.aiModel, this.gameState, this.difficulty)
      if (aiMove) {
        const piece = this.pieces.find(p => 
          p.position[0] === aiMove.from[0] && 
          p.position[1] === aiMove.from[1]
        )
        if (piece) {
          this.movePiece(piece, aiMove.to)
          this.switchTurn()
        }
      }
    },
    updateGameState() {
      this.gameState = {
        pieces: this.pieces.map(p => ({
          type: p.type,
          camp: p.camp,
          position: p.position
        })),
        currentTurn: this.currentTurn
      }
    },
    resetGame() {
      this.initializeGame()
    }
  }
}
</script>

<style scoped>
.chess-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.board-container {
  position: relative;
  background: #f0c78a;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.grid {
  position: relative;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.cell {
  width: 60px;
  height: 60px;
  border: 1px solid #8b4513;
  box-sizing: border-box;
}

/* 移除楚河汉界所在行的竖向边框 */
.row:nth-child(5) .cell {
  border-left: none;
  border-right: none;
}

.row:nth-child(5) .cell:first-child {
  border-left: 1px solid #8b4513;
}

.row:nth-child(5) .cell:last-child {
  border-right: 1px solid #8b4513;
}

.pieces {
  position: absolute;
  top: 50px;
  left: 50px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

.piece {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  transform: translate(-50%, -50%);
}

.piece.red {
  background: #f44336;
  color: #fff;
}

.piece.black {
  background: #2c3e50;
  color: #fff;
}

.piece.selected {
  box-shadow: 0 0 0 3px #4CAF50;
}

.game-controls {
  display: flex;
  gap: 10px;
}

.control-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.control-btn:hover {
  background-color: #45a049;
}

.river-text {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 80px;
  box-sizing: border-box;
  pointer-events: none;
}

.river-text span {
  font-size: 28px;
  font-weight: bold;
  color: #8b4513;
  writing-mode: horizontal-tb;
  letter-spacing: 4px;
}
</style>